<template>
	<view>
		<z-paging
			ref="paging"
			:refresher-out-rate="0.8"
			:auto-clean-list-when-reload="false"
			:auto-scroll-to-top-when-reload="false"
			safe-area-inset-bottom
			bg-color="#FFF"
			:refresher-status.sync="refresherStatus"
			v-model="dataList"
			@query="queryList"
		>
			<view class="top" slot="top">
				<view class="flex_wrap row_middle row_between searchArea">
					<u-search
						placeholder="搜索提交人/会议主题"
						v-model="keyword"
						bgColor="#E1E1E1"
						color="#999999"
						placeholderColor="#999999"
						:actionStyle="{ color: '#588BF3' }"
						clearabled
					/>
				</view>
			</view>
			<view class="item" v-for="(item, index) in dataList" :key="index">
				<view class="itemBox flex_wrap flex_column">
					<view class="flex_wrap itemBox_top">
						<u-text text="提交人:王杰" color="#588BF3" size="32rpx" bold />
						<u-text text="22.01.10" color="#000" size="24rpx" align="right" suffixIcon="arrow-right" iconStyle="fontSize:24rpx;lineHeight:38rpx" />
					</view>
					<view class="itemBox_content flex_wrap flex_column">
						<view class="flex_wrap">
							<u-text text="数字化华山论剑" color="#333" bold size="30rpx" />
							<u-button :customStyle="customButtonStyle" color="#588BF3" text="审核" shape="circle" />
						</view>
						<u-gap height="22rpx" />
						<view class="itemBox_content_timeBox flex_wrap">
							<view class="itemBox_content_timeBox_lable"><u-text text="时间" color="#999" size="26rpx" /></view>
							<view class="itemBox_content_timeBox_value"><u-text text="22/06/26 9:30-22/06/27 11:00" color="#333" bold size="28rpx" lines="2" /></view>
						</view>
						<u-gap height="22rpx" />
						<view class="itemBox_content_timeBox flex_wrap">
							<view class="itemBox_content_timeBox_lable"><u-text text="地点" color="#999" size="26rpx" /></view>
							<view class="itemBox_content_timeBox_value"><u-text text="嘉兴市南湖区某某路某某大酒店10楼3007厅" color="#333" bold size="28rpx" lines="2" /></view>
						</view>
						<view class="itemBox_content_icon icon1"></view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
import FilterMultiple from '@/pages_initiateMeeting/components/FilterMultiple/FilterMultiple.vue';
export default {
	data() {
		return {
			keyword: '',
			refresherStatus: 0,
			dataList: [1, 2, 3, 4, 5],
			customButtonStyle: {
				// 报名按钮自定义样式
				width: '158rpx',
				height: '44rpx',
				fontSize: '24rpx',
				margin: '0'
			},
			buttonCustomStyle: {
				height: '74rpx',
				width: '694rpx',
				backgroundColor: '#588BF3',
				fontSize: '#FFF',
				margin: '0 auto',
				color: '#FFF'
			}
		};
	},
	components: {
		FilterMultiple
	},
	methods: {
		queryList(pageNo, pageSize) {
			setTimeout(() => {
				// this.$refs.paging.complete([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
				this.$refs.paging.completeByTotal([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 20);
			}, 500);
		}
	}
};
</script>

<style lang="scss">
.searchArea {
	width: 100vw;
	height: 140upx;
	padding: 28upx 28upx 0 28upx;
	background-color: #fff;
}
.item {
	width: 100vw;
	height: auto;
	padding: 0 28upx;
	margin-top: 24upx;
	.itemBox {
		width: 100%;
		height: auto;
		border-radius: 12upx;
		box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 0.08);
		&_top {
			border-bottom: 1px solid #f3f3f3;
			padding: 18upx 24upx;
		}
		&_content {
			width: 100%;
			padding: 26upx 24upx;
			position: relative;
			&_icon {
				width: 116upx;
				height: 116upx;
				position: absolute;
				right: 20upx;
				bottom: 20upx;
			}
			&_icon.icon1 {
				background-image: url('@/static/img/conference/meetingStatus1.png');
				background-size: cover;
			}

			&_timeBox {
				width: 100%;
				&_lable {
					width: 100upx;
				}
				&_value {
					width: 420upx;
				}
			}
		}
	}
}
</style>
